<template>
  <div>
    <van-form
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-field
        rows="2"
        autosize
        label="头像"
        type="textarea"
        required
        placeholder="支持格式：JPG、JPEG、PNG，最多上传2张照片，单个不超过5M"
        show-word-limit
        label-width="15%"
        readonly
      />
      <upload-img v-model="photoImgs" :maxCount="1" :deletable="true" style="padding: 15px"></upload-img>

      <van-field
        name="name"
        label="姓名"
        placeholder="请输入姓名"
        input-align="right"
        required
        autocomplete="off"
        v-model="exportInfo.name"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
        name="sex"
        label="性别"
        readonly
        placeholder="请选择性别"
        input-align="right"
        v-model="exportInfo.sex"
        is-link
        @click="showSex = true"
      />
      <van-field
        name="expertTitleName"
        label="专家职称"
        readonly
        is-link
        required
        placeholder="请选择专家职称"
        input-align="right"
        v-model="exportInfo.expertTitleName"
        :rules="[{ required: true, message: '请选择专家职称' }]"
        @click="showPosition = true"
      />
      <van-field
        name="typeCode"
        label="擅长领域"
        readonly
        required
        placeholder="请选择擅长领域"
        is-link
        :rules="[{ required: true, message: '请选择擅长领域' }]"
        input-align="right"
        v-model="exportInfo.typeName"
        @click="showField = true"
      />
      <van-field
        autosize
        label="个人简介"
        type="textarea"
        required
        placeholder="请输入内容"
        show-word-limit
        maxlength="500"
        autocomplete="off"
        v-model="exportInfo.expertIntroduce"
        label-width="25%"
      />
      <van-field
        name="birthday"
        label="出生日期"
        readonly
        placeholder="请选择出生日期"
        v-model="exportInfo.birthday"
        is-link
        input-align="right"
        @click="showDate = true"
      />
      <van-field
        name="dizhi"
        label="工作地址"
        readonly
        autocomplete="off"
        placeholder="请选择工作地址"
        input-align="right"
        v-model="exportInfo.areaName"
        is-link
        @click="showArea = true"
      />
      <van-field
        rows="1"
        autosize
        label="详细地址"
        type="textarea"
        placeholder="请输入详细地址"
        autocomplete="off"
        v-model="exportInfo.address"
      />
      <van-field
        name="workUnit"
        label="工作单位"
        placeholder="请输入工作单位"
        autocomplete="off"
        input-align="right"
        required
        v-model="exportInfo.workUnit"
      />
      <van-field
        autosize
        row="2"
        label="个人成就"
        type="textarea"
        placeholder="请输入个人成就"
        show-word-limit
        maxlength="20"
        label-width="25%"
        autocomplete="off"
        v-model="exportInfo.achievement"
      />
      <van-field label="身份证号码" placeholder="请输入身份证号码" show-word-limit v-model="exportInfo.idCardNum" />
      <van-field
        rows="2"
        autosize
        label="身份证照片"
        type="textarea"
        placeholder="支持格式：JPG、JPEG、PNG，最多上传2张照片，单个不超过5M"
        show-word-limit
        readonly
        class="card"
      />
      <upload-img1 v-model="idCardImgs" :maxCount="2" :deletable="idCardImgs.length? true:false " style="padding: 15px"></upload-img1>
      <van-field
        rows="2"
        autosize
        label="专家职称照片"
        type="textarea"
        placeholder="支持格式：JPG、JPEG、PNG，最多上传2张照片，单个不超过5M"
        show-word-limit
        readonly
        :border="false"
        class="card"
      />
      <upload-img2 v-model="expertTitleImgs" :maxCount="2" :deletable="expertTitleImgs.length? true:false " style="padding: 15px"></upload-img2>
      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          round
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >保存</van-button
        >
      </div>
    </van-form>
    <!-- 出生日期 -->
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
      title="出生日期"
      type="date"
      @confirm="dateSave"
       v-model="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
       @cancel="showDate = false" />
    </van-popup>
    <!-- 性别选择 -->
    <van-popup v-model="showSex" position="bottom">
      <van-picker title="选择性别" show-toolbar :columns="sexList" @confirm="sexSave" @cancel="showSex = false" />
    </van-popup>
    <!-- 专家职称选择 -->
    <van-popup v-model="showPosition" position="bottom">
      <van-picker
        title="选择职称"
        show-toolbar
        :columns="positionList"
        @confirm="positionSave"
        @cancel="showPosition = false"
        value-key="title"
      />
    </van-popup>
    <!-- 擅长领域 -->
    <van-popup v-model="showField" position="bottom">
      <div class="head">
        <span @click="showField = false">取消</span>
        <p>选择擅长领域</p>
        <span @click="fieldSave">确定</span>
      </div>
      <div class="places">
        <div class="place_item" v-for="(item, index) in fieldList" :key="item.value" @click="toggle(index)">
          <span>{{ item.label }}</span>
          <van-checkbox checked-color="#37b5b5" v-model="item.check" shape="square"></van-checkbox>
        </div>
      </div>
    </van-popup>
    <!-- 省市区选择 -->
    <van-popup v-model="showArea" position="bottom">
      <van-area title="地址" :value="exportInfo.countyCode" :area-list="areaList" @cancel="showArea = false" @confirm="saveArea" />
    </van-popup>
  </div>
</template>
<script>
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Popup,
  Cell,
  Tabs,
  Tab,
  Area,
  Checkbox,
  CheckboxGroup

} from 'vant'
import dayjs from 'dayjs'
import { getValue, setValue, clearValue } from '@/utils/auth'
import { expertTitleQueryList, businessData4Amis, expertTitle, subjectInfoExpert, subjectInfoExpertData } from '@/api/record.js'
import UploadImg from '../../components/uploadImg'
import UploadImg1 from '../../components/uploadImg1'

import UploadImg2 from '../../components/uploadImg2'

import areaList from '@/utils/area.js'
export default {
  components: {
    UploadImg,
    UploadImg1,
    UploadImg2,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Tabs.name]: Tabs,
    [Area.name]: Area,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,

    [Tab.name]: Tab
  },
  data() {
    return {
      minDate: new Date(1920, 0 , 1),
      maxDate: new Date(2032, 11, 31),
      currentDate: new Date(),
      showSex: false, // 性别弹窗
      sexList: ['男', '女'],
      showPosition: false, // 职称弹窗
      positionList: [],
      showField: false, // 领域弹窗
      fieldList: [],
      showDate: false, // 出生日期弹窗
      areaList: areaList,
      showArea: false, // 地址弹窗
      loading: false,
      photoImgs: [],
      expertTitleImgs: [],
      idCardImgs: [],
      exportInfo: {
        userId: getValue('userAccId') || '', //
        name: '', // 专家姓名
        photo: 'kong', // 头像
        sex: '', // 性别
        birthday: '', // 出生年月
        typeCodes: '', // 擅长领域id
        typeName: '', // 擅长领域Name
        expertTitleId: '', // 专家职称ID
        expertTitleName: '', // 专家职称name
        workUnit: '', // 工作单位
        provinceCode: '', // 省份编码
        cityCode: '', // 城市编码
        countyCode: '', // 区县编码
        address: '', // 详细地址
        achievement: '', // 个人成就
        expertIntroduce: '', // 专家简介
        expertTitleImage: 'kong', // 职称照片
        idCardImage: 'kong', // 身份证照片n
        expertTitleNum: '', // 职称号
        idCardNum: '', // 身份证号
        areaName: '' // 工作地址name
      }
    }
  },
  async mounted() {
    // setValue('userAccId', 'dc9fdf60-1880-4851-8fcd-90d8ca7c7af5')
    await this.loadExportList()
    subjectInfoExpertData(getValue('userAccId')).then(res => {
      const datas = res.data
      this.fieldList.forEach(ele => {
        datas.types.forEach(ele2 => {
          if (ele.value === ele2.code) {
            ele.check = true
          }
        })
      })
      const typeCodes = datas.types.map(ele => ele.code).toString()
      const typeName = datas.types.map(ele => ele.name).toString()
      const newData = {
        userId: getValue('userAccId') || '', //
        name: datas.name,
        photo: datas.photo,
        sex: datas.sex,
        birthday: datas.birthday,
        typeCodes,
        typeName,
        expertTitleId: datas.expertTitle.id,
        expertTitleName: datas.expertTitle.title,
        workUnit: datas.workUnit,

        address: datas.address,
        achievement: datas.achievement,
        expertIntroduce: datas.expertIntroduce,
        expertTitleImage: datas.expertTitleImage,
        idCardImage: datas.idCardImage,
        expertTitleNum: datas.expertTitle.id,
        idCardNum: datas.idCardNum
      }
      if (datas.province) {
        newData.provinceCode = datas.province.code
      }
      if (datas.city) {
        newData.cityCode = datas.city.code
      }
      if (datas.county) {
        newData.countyCode = datas.county.code
      }
      if (datas.province && datas.city && datas.county) {
        newData.areaName = datas.province.name + ',' + datas.city.name + ',' + datas.county.name
      }
      this.exportInfo = newData
      this.photoImgs = [datas.photo]
      this.expertTitleImgs = datas.expertTitleImageList.map(ele => ele.src)
      this.idCardImgs = datas.idCardImageList.map(ele => ele.src)
      console.log(this.expertTitleImgs)
      // this.idCardImgs = datas.idCardImage.split(',')
      // datas.areaName = datas.province.name+','+datas.province.
      // this.exportInfo = res.data.data
    })
  },
  computed: {
    lingyuName() {
      return this.fieldList
        .filter(item => item.check)
        .map(item => item.label)
        .toString()
    },
    lingyuCode() {
      return this.fieldList
        .filter(item => item.check)
        .map(item => item.value)
        .toString()
    }
  },
  methods: {
    // 获取擅长领域,专家职称
    async loadExportList() {
      await businessData4Amis().then(res => {
        const datas = res.data.options
        datas.forEach(ele => {
          ele.check = false
        })
        this.fieldList = datas
      })
      await expertTitle().then(res => {
        this.positionList = res.data.rows
      })
    },
    // 保存
    onSubmit() {
      console.log(1)
      const reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      if (this.exportInfo.idCardNum && !reg.test(this.exportInfo.idCardNum)) {
        Toast.fail('请输入正确的身份证号信息')
        return
      }

      this.loading = true
      subjectInfoExpert(this.exportInfo).then(res => {
        console.log(res)
        if (res.status === 0) {
          Toast('您的账号已提交至管理人员审核，审核通过后可登录！！')
          setTimeout(() => {
            this.$bridge.call('login')
          }, 2000)
        } else {
           Toast.fail(res.msg || '操作失败')
        }
        this.loading = false
      })
    },
    // 性别确认
    sexSave(v) {
      this.exportInfo.sex = v
      this.showSex = false
    },
    // 领域确认
    fieldSave() {
      this.showField = false
      this.exportInfo.typeCodes = this.lingyuCode
      this.exportInfo.typeName = this.lingyuName
    },
    // 职称确认
    positionSave(e) {
      this.exportInfo.expertTitleName = e.title
      this.exportInfo.expertTitleId = e.id
      this.exportInfo.expertTitleNum = e.tenantCode
      this.showPosition = false
    },
    // 出生日期确认
    dateSave(date) {
      this.exportInfo.birthday = dayjs(date).format('YYYY-MM-DD')
      this.showDate = false
    },
    // 地址选择
    saveArea(item) {
      this.exportInfo.areaName = item[0].name + ',' + item[1].name + ',' + item[2].name
      this.exportInfo.provinceCode = item[0].code
      this.exportInfo.cityCode = item[1].code
      this.exportInfo.countyCode = item[2].code
      this.showArea = false
    },
    // 选择擅长领域-复选框
    toggle(index) {
      this.fieldList[index].check = !this.fieldList[index].check
    },
    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .van-cell:first-child::after,
.card::after {
  border: none;
}
.border {
  width: 90%;
  height: 1px;
  margin: 0 auto;
  border-bottom: 1px solid #eeeeee;
}
.b-g-f {
  position: relative;
  padding-top: 0 !important;
}
.b-g-f::after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 16px;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #eeeeee;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.add-btn {
  padding-bottom: 20px;
}
.places {
  padding: 0 16px;
  box-sizing: border-box;
  .place_item {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.head {
  display: flex;
  padding: 15px 16px;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 15px;
  border-bottom: 1px solid #e9e9e9;
  span {
    color: #37b5b5;
  }
  span:first-child {
    color: #969799;
  }
  p {
    color: #666666;
  }
}
</style>
